<template>
    <view>
        <!-- 搜索框模块 -->
        <view class="search-box"><uni-search-bar :radius="100" cancelButton="none" @input="input"></uni-search-bar></view>
        <!-- 搜索建议列表模块 -->
        <view class="sugg-list" v-if="searchResults.length !== 0">
            <view class="sugg-item" v-for="(item, index) in searchResults" :key="index" @click="goToDetail(item)">
                <view class="goods-name">{{ item.goods_name }}</view>
                <uni-icons type="arrowright" size="16"></uni-icons>
            </view>
        </view>
        <!-- 搜索历史 -->
        <view class="history-box" v-else>
            <view class="history-title">
                <text>搜索历史</text>
                <uni-icons type="trash" size="17" @click="clean"></uni-icons>
            </view>
            <view class="history-list"><uni-tag v-for="(item, index) in histories" :key="index" :text="item" @click="goToGoodsList(item)"></uni-tag></view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            timer: null,
            kw: null,
            searchResults: [], // 搜索结果数组
            historyList: [] // 搜索历史数组
        };
    },
    onLoad() {
        this.historyList = JSON.parse(uni.getStorageSync('kw') || '[]');
    },
    methods: {
        input(e) {
            clearTimeout(this.timer);
            this.timer = setTimeout(() => {
                this.kw = e.value;
                // 获取搜索建议列表
                this.getSearchList();
            }, 500);
        },
        async getSearchList() {
            // 搜索关键词是否为空
            if (this.kw.length === 0) {
                this.searchResults = [];
                return;
            }
            const { data: res } = await uni.$http.get('/api/public/v1/goods/qsearch', { query: this.kw });

            if (res.meta.status !== 200) return uni.$showMsg();
            this.searchResults = res.message;
            this.saveSearchHistory();
        },
        goToDetail(item) {
            uni.navigateTo({
                url: '/subpkg/goods_detail/goods_detail?goods_id=' + item.goods_id
            });
        },
        // 保存搜索记录
        saveSearchHistory() {
            // this.historyList.push(this.kw);
            const set = new Set(this.historyList);
            set.delete(this.kw);
            set.add(this.kw);
            this.historyList = Array.from(set);
            // 持久化存储
            uni.setStorageSync('kw', JSON.stringify(this.historyList));
        },
        clean() {
            this.historyList = [];
            uni.setStorageSync('kw', '[]');
        },
        goToGoodsList(kw) {
            uni.navigateTo({
                url: '/subpkg/goods_list/goods_list?query=' + kw
            });
        }
    },
    computed: {
        histories() {
            return [...this.historyList].reverse();
        }
    }
};
</script>

<style lang="scss">
.search-box {
    position: sticky;
    top: 0;
    z-index: 2;
}
.sugg-list {
    padding: 3px 5px;
    .sugg-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 16px;
        padding: 15px 0;
        border-bottom: 1px solid #eaeaea;
        .goods-name {
            // 文字不换行
            white-space: nowrap;
            overflow: hidden;
            // 文字的超出部分使用...代替
            text-overflow: ellipsis;
        }
    }
}
.history-box {
    padding: 0 8px;
    .history-title {
        display: flex;
        justify-content: space-between;
        height: 40px;
        align-items: center;
        font-size: 14px;
        border-bottom: 1px solid #efefef;
    }
    .history-list {
        display: flex;
        flex-wrap: wrap;
        .uni-tag {
            margin: 5px 8px 5px 0;
        }
    }
}
</style>
